<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script src="../js/jquery-3.2.1.min.js"></script>
<%--&lt;%&ndash;    导入头&ndash;%&gt;--%>
<%--<%@ include file="heder.jsp" %>--%>
<html>
<%--头--%>
<head>

    <title>展示用户信息</title>
    <!--导入bootstrap框架-->
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">
    <link href="$${pageContext.request.contextPath}/css/index.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/owl.carousel.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery.mixitup.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery.fancybox.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery.counterup.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/waypoints.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery.magnific-popup.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/countdown.js"></script>
    <script src="${pageContext.request.contextPath}/js/script.js"></script>
    <%--    弹窗登陆--%>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide {
            display: none;
        }

        .c1 {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, .5);
            z-index: 2;
        }

        .c2 {
            /*background-color: white;*/
            position: fixed;
            width: 400px;
            height: 300px;
            top: 50%;
            left: 50%;
            z-index: 3;
            margin-top: -150px;
            margin-left: -200px;
        }

        #modal p {
            margin-left: 80px;
        }
    </style>

</head>
<style>
    .heder_div {
        height: 60px;
        background-color: #0078D7;
    }

    .left_div1 {
        float: left;
        padding-right: 300px;
        margin-top: 20px;
    }

    .left_div2 {
        float: left;
        padding-left: 400px;
        margin-top: 20px;
    }

    .right_div2 {
        float: right;
        margin-top: 20px;
        padding-right: 50px;
    }

    .right_div1 {
        float: right;
        margin-top: 20px;
        padding-right: 10px;
    }

    .fst_class {
        height: 30px;
        margin: auto;
    }
</style>
<%--房间数量样式--%>
<style>
    #button {
        margin-right: 50px;
        float: right;
    }


    #boyhead {
        float: right;
        width: 100%;
        height: 30px;
    }

    #roomShowAll {
        width: 1000px;
        height: 800px;
        /*text-align: center;
        margin: auto;
        margin-left: 40px;*/
    }
</style>
<style>

    .lt {
        text-align: center;
        margin: 20px;

    }
</style>
<title>展示房间</title>
<script>
    function del(id) {
        //用户安全提示
        if (confirm("您确定要删除吗？")) {
            //访问路径
            location.href = "${pageContext.request.contextPath}/room/delete?id=" + id;
        }
    }

</script>

<script type="text/javascript">

    function showTime() {
        var now = new Date();
        var endDate = new Date();
        endDate.setYear(now.getFullYear());
        endDate.setMonth(now.getMonth() + 1);
        endDate.setDate(now.getDate() + 1);
        endDate.setHours(0, 0, 0, 0);
// alert(endDate.toString());
        var leftTime = endDate.getTime() - now.getTime();
        var leftsecond = parseInt(leftTime / 1000);
        var day1 = Math.floor(leftsecond / (60 * 60 * 24));
        var hour = Math.floor((leftsecond - day1 * 24 * 60 * 60) / 3600);
        var minute = Math.floor((leftsecond - day1 * 24 * 60 * 60 - hour * 3600) / 60);
        var second = Math.floor(leftsecond - day1 * 24 * 60 * 60 - hour * 3600 - minute * 60);
        $("#lbtimer").html(" 还剩 <em> "+ hour + " </em> 小时<em>" + minute + " </em>分<em>" + second + "</em> 秒");
    }
</script>

<header>
    <div class="heder_div">
        <div class="left_div1"><img src="../images/log.png" alt="123"/></div>
        <div class="left_div2"><input type="text" placeholder="请输入姓名或房间号" class="fst_class"></div>
        <div class="right_div1"><input type="button" value="退出" onclick="window.location.href='/admin/退出'"></div>
      <%--  <div class="right_div1" href="分配页面.jsp"><input type="button" onclick="window.location.href='分配页面.jsp'" value="分配"></div>--%>
        <div class="right_div2">欢迎你:${admin.adminName}</div>
    </div>
</header>
<body>

<%--显示剩余房间数量--%>
<div id="boyhead" >
    <div id="button" >
        <input id="emptyRoom" type="button" value="空房" onclick="window.location.href='http://localhost/pages/freeRoom2.jsp'" >
        <input id="allRoom" type="button" value="全部" onclick="window.location.href='http://localhost/pages/room-list.jsp'">
    </div>
    <div style="margin-left: 1300px">共${roomNumber}间&nbsp;,&nbsp;入住&nbsp;:&nbsp;${fullRoom}间&nbsp;,&nbsp;
        剩余&nbsp;:&nbsp;${emptyRoom}间
    </div>
</div>


<!-- Tab panes -->
<div style="padding: auto">
    <div role="tabpanel" class="tab-pane active" id="home">
        <div class="row" style="margin-left: 100px">
            <c:forEach items="${rooms}" var="room" varStatus="i">
                <div class="col-md-3">
                    <a href="${pageContext.request.contextPath}/pages/room_z_t.jsp?rid=${room.roomNumber}&rt=${room.roomType}&rp=${room.roomPrice}&rf=${room.roomFlag}&cn=${room.client.clientName}&cc=${room.client.clientIdcard}&ct=${room.client.clientEndtime}&cid=${room.client.id}">
                        <img src="${pageContext.request.contextPath}/images/jiudian.jpg" width="300"
                             alt="Responsive image" onclick="">
                        <div class="has_border">
                            <h3>${room.roomNumber}号(${room.roomFlag})</h3>
                            <div class="djs">房间截至日期为:${room.client.clientEndtime}</div>
                        </div>
                        <div> &nbsp </div>
                    </a>
                </div>
            </c:forEach>
        </div>
    </div>
</div>
</body>

</html>
